<script setup lang="ts"></script>

<template>
  <div
    class="relative flex h-full w-full items-center justify-center bg-gray-50 dark:bg-gray-900"
  >
    <!-- 背景图案 -->
    <div
      class="bg-move-animation absolute left-0 top-0 h-full w-full bg-[length:40px_40px]"
      :style="{
        'background-image':
          'linear-gradient(135deg, #f8f9fa 25%, #e9ecef 25%, #e9ecef 50%, #f8f9fa 50%, #f8f9fa 75%, #e9ecef 75%, #e9ecef)',
      }"
    ></div>
    <div
      class="bg-move-animation absolute left-0 top-0 h-full w-full bg-[length:40px_40px] opacity-0 dark:opacity-100"
      :style="{
        'background-image':
          'linear-gradient(135deg, #121212 25%, #1a1a1a 25%, #1a1a1a 50%, #121212 50%, #121212 75%, #1a1a1a 75%, #1a1a1a)',
      }"
    ></div>

    <h1
      class="relative text-center text-4xl font-bold text-gray-800 sm:text-6xl md:text-8xl dark:text-white"
    >
      Geographic Scenic Large Model WorkSpace
    </h1>
  </div>
</template>

<style>
@keyframes move {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 40px 40px;
  }
}

.bg-move-animation {
  animation: move 4s linear infinite;
}
</style>
